<script setup>
import { userEnroll } from '../api/logn'
import { reactive, ref } from 'vue'
import router from '../router'
const form = reactive({
    username: '',
    password: ''
})
function login() {
    userEnroll(form)
        .then((res) => {
            if (res.data.per == '1') {
                router.push('/home/userhome')
               

            }
            else if (res.data.per == '2') {
                router.push('/manage')
    
            }
        })
}

</script>
<template>
   <div class="videoContainer">
        <video src="../assets/bg.mp4" class="fullscreenVideo" id="bgVid" playsinline="" autoplay="" muted="" loop="">
        </video>
    </div>
    <el-form :model='form' class="form">
        <h1>漫展管理系统</h1>
        <el-form-item label="账号">
            <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="form.password" />
        </el-form-item>
        <el-button @click="login">登录</el-button>
    </el-form>
    
</template>
<style scoped>
.form {
    position: absolute;
    text-align: center;
    top: 200px;
    left: calc(50% - 200px);
    width: 400px;
    border: 2px solid black;
    margin:  auto;
    padding: 20px;
    background-color: rgba(126, 143, 30,.5);
    color: rgb(249, 249, 249);
}

.fullscreenVideo {
    width: 100%;
    height: 100%;
    object-fit: fill
}

.videoContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
}

.videoContainer:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(25, 29, 34, .5);
    background-size: cover;
}

.fullscreenVideo {
    width: 100%;
    height: 100%;
    object-fit: fill
}
</style>